<template>
  <div>
    <div>数据的响应式-ref</div>
    <div>{{count}}</div>
    <ul>
      <li v-for='(item, index) in arr' :key='index'>{{item}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 定义一个普通数据并且是响应式的
    // ref定义的数据，在js中访问时需要value属性，但是模板中不需要
    // 这种数据对象和toRef和toRefs返回的数据对象本质上是一致的
    const count = ref(0)
    // ref可以定义对象，但是不建议（如果定义对象类型的数据建议使用reactive）
    const info = ref({ abc: '123' })
    // const obj = reactive({ list: []})
    // 如果定义数组，建议使用ref
    const arr = ref(['apple', 'orange', 'peach', 'pineapple', 'eggplant'])

    const handleClick = () => {
      count.value += 1
      console.log(info.value.abc)
      arr.value.push('watermelon')
    }

    return { count, arr, handleClick }
  }
}
</script>
